<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue_选项卡</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        .body_style {
            width: 600px;
            margin: 0 auto;
        }

        .nav_list {
            width: 600px;
            font-size: 0;
        }

        .a_style {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 25%;
            text-align: center;
            background: #ccc;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
        }

        .active {
            background-color: #BE3948;
            color: white;
        }

        .div_style {
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="body_div" v-bind:class='{ body_style: style_body_flg}'>
        <nav v-bind:class='{nav_list:nav_list_flg}'>
            <a class="a_style" v-for="(a_item,index) in a_list" v-bind:class="{active:index == num}" v-on:click="tab(index)">{{a_item}}</a>
        </nav>
        <div v-bind:class='{div_style:div_style_flg}'>
            <ul>
                <li v-for='(li_item,index) in li_list' v-show=" index == num">{{li_item}}</li>
            </ul>
        </div>
    </div>

    <script>
        var body_div = new Vue({
            el: '#body_div',
            data: {
                a_list: ["标题一", "标题二", "标题三", "内容四"],
                li_list: ["javascript", "css", "html", "vue"],
                num: 0,
                style_body_flg: true,
                nav_list_flg: true,
                div_style_flg: true,
            },
            methods: {
                tab(index) {
                    this.num = index;
                }
            }
        });


    </script>
</body>

</html>